<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>职位搜索</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>

<body>

    <!-- 头部 -->
    <header>

        <nav>

            <div class="logo">
                <div>趣</div>
                趣乐聘
            </div>

            <ul>
                <li data-type="home">首页</li>
                <li data-type="search" class="on">职位搜索</li>
                <li data-type="r_job">返利职位</li>
                <li data-type="info">职场资讯</li>
                <li data-type="my">关于我们</li>

                <li style="width: 450px; float: right;">
                    <div class="col-lg-8" style="margin-left: 20%;">
                        <div class="input-group">
                            <input id="search_val" type="text" class="form-control" placeholder="Search for...">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button"  onclick="search();">搜索</button>
                            </span>
                        </div>
                    </div>
                </li>
            </ul>



        </nav>

    </header>

    <section class="params" style="display: none;">
        <ul>
            <li>
                <label>类别：</label>
                <small class="on">不限</small>
                <small>不限</small>
                <small>不限</small>
            </li>
            <li>
                <label>类别：</label>
                <small>不限</small>
                <small>不限</small>
                <small>不限</small>
            </li>
            <li>
                <label>类别：</label>
                <small>不限</small>
                <small>不限</small>
                <small>不限</small>
            </li>
            <li>
                <label>类别：</label>
                <small>不限</small>
                <small>不限</small>
                <small>不限</small>
            </li>
        </ul>
    </section>

    <br />

    <!-- 职位推荐 -->
    <section id="list" class="job-list" data-info="tuijian">

        <div class="head">
            <div class="title">
                智能匹配
            </div>
        </div>

        <ul>
            <li v-for="item in listDate"  @click="toinfo(item)">
                    <img :src="item.Logo" />
                    <img :src="item.qr" />
                    <div class="compaly"> 
                        <lable>{{item.firmName}}</lable>
                        <p>工作地点：{{item.address}}</p>
                        <p class="price">入职奖励{{item.reward}}，分享返利{{item.shareMoney}}</p>
                    </div>
                    <div class="heading">{{item.title}}</div>
                    <label class="price">{{item.moneyMin}}-{{item.moneyMax}}</label>
                    <label>{{item.lableList}}</label>
                    <label>{{item.workTime == 0 ? "工作经验不限" : item.workTime +"年"}}</label>
                    <label>{{item.sex == '' ? "性别不限" : item.workTime}}</label>
                    <div class="body">
                        <label>{{item.CTLableList}}</label>
                    </div>
            </li>
        </ul>

    </section>
    <script src="main.js"></script>

</body>

</html>